<template>
  <div class="box_back_col">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">首页</div>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-row>
            <el-col :span="3">
              <el-select v-model="pdate" disabled>
                <el-option label="日统计" value="day"></el-option>
                <el-option label="月统计" value="mouth"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" class="col-sty-with">
              <el-select v-model="queryParams.ohid" @visible-change="prosList" clearable>
                <el-option v-for="item in this.properList" :key="item.pmid" :label="item.propertyName"
                           :value="item.pmid"></el-option>
              </el-select>
            </el-col>
            <el-col :span="3" class="col-sty-with">
              <el-select v-model="queryParams2.hpid" @visible-change="carsList" clearable>
                <el-option v-for="item in this.carList" :key="item.chid" :label="item.chname"
                           :value="item.chid"></el-option>
              </el-select>
            </el-col>

            <el-col :span="8" class="col-sty-with">
              <el-date-picker
                type="datetimerange"
                is-range
                v-model="queryParams.time"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="handleChangeDateInEvent"
              >
              </el-date-picker>
            </el-col>
            <el-col :span="5" class="col-sty-with">
              <el-button type="primary" size="small" @click="restMsgTime">重置</el-button>
              <el-button type="primary" size="small" @click="querySel">查询</el-button>
              <!--              <el-button type="primary" size="small" @click="">大屏</el-button>-->
            </el-col>
            <el-col :span="24">
              <div class="out_box">
                <div class="box-content box-blue" @click="$router.push({path:'/property/propertyWater',query: {ttid: 2}})">
                  <div style="margin: 10px;color: white;line-height: 30px">
                    <div style="width: 49%;float: left">
                      <div style="font-size: 16px;">月卡收入</div>
                      <div style="font-size: 12px;">物业微信: {{ yueka.wx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">线下: {{ yueka.xx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">数量: {{ yueka.num }}</div>
                    </div>
                    <div style="width: 49%;float: right">
                      <div style="font-weight: bold;background-color: #2e6eb2;width: 32px;float: right">实时</div>
                      <div style="font-size: 12px;float: right;position: relative;top: 32px">物业支付宝:
                        {{ yueka.zfb.toFixed(2) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-content box-red" @click="$router.push({path:'/property/propertyWater',query: {ttid: 3}})">
                  <div style="margin: 10px;color: white;line-height: 30px">
                    <div style="width: 49%;float: left">
                      <div style="font-size: 16px;">车位收入</div>
                      <div style="font-size: 12px;">物业微信: {{ chewei.wx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">线下: {{ chewei.xx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">数量: {{ chewei.num }}</div>
                    </div>
                    <div style="width: 49%;float: right">
                      <div style="font-weight: bold;background-color: #ab4b4b;width: 32px;float: right">实时</div>
                      <div style="font-size: 12px;float: right;position: relative;top: 32px">物业支付宝:
                        {{ chewei.zfb.toFixed(2) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-content box-green" @click="$router.push({path:'/property/propertyWater',query: {ttid: 1}})">
                  <div style="margin: 10px;color: white;line-height: 30px">
                    <div style="width: 49%;float: left">
                      <div style="font-size: 16px;">临停收入</div>
                      <div style="font-size: 12px;">物业微信: {{ linshi.wx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">线下: {{ linshi.xx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">数量: {{ linshi.num }}</div>
                    </div>
                    <div style="width: 49%;float: right">
                      <div style="font-weight: bold;background-color: #488729;width: 32px;float: right">实时</div>
                      <div style="font-size: 12px;float: right;position: relative;top: 32px">物业支付宝:
                        {{ linshi.zfb.toFixed(2) }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="box-content box-gray" @click="$router.push({path:'/property/propertyWater',query: {ttid: 4}})">
                  <div style="margin: 10px;color: white;line-height: 30px">
                    <div style="width: 49%;float: left">
                      <div style="font-size: 16px;">商家充值收入</div>
                      <div style="font-size: 12px;">物业微信: {{ shangjia.wx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">线下: {{ shangjia.xx.toFixed(2) }}</div>
                      <div style="font-size: 12px;">数量: {{ shangjia.num }}</div>
                    </div>
                    <div style="width: 49%;float: right">
                      <div style="font-weight: bold;background-color: #65676b;width: 32px;float: right">实时</div>
                      <div style="font-size: 12px;float: right;position: relative;top: 32px">物业支付宝:
                        {{ shangjia.zfb.toFixed(2) }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="middle_box">
                <div class="box-content2 box-left">
                  <div id="box-left-son" ref="chartContainer3"></div>
                  <div id="box-right-son" ref="chartContainer4"></div>
                </div>
                <div class="box-content2 box-right">
                  <div class="box-parent-flex">
                    <div class="el-menu-box1">
                      <el-menu
                        class="el-cli-router"
                        mode="horizontal"
                        router="router"
                      >
                        <el-menu-item-group>
                          <el-menu-item index="/property/propertyWater">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-weixin1"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
<!--                                  <div>{{ meuite.wx.toFixed(2) }}</div> &lt;!&ndash; 右边上方的内容 &ndash;&gt;-->
                                  <div>{{ (yueka.wx+linshi.wx+shangjia.wx+chewei.wx).toFixed(2) }}</div>
                                  <div>微信总收入</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/property/propertyWater">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-zhifubao"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
<!--                                  <div>{{ meuite.zfb.toFixed(2) }}</div> &lt;!&ndash; 右边上方的内容 &ndash;&gt;-->
                                  <div>{{ (yueka.zfb+linshi.zfb+shangjia.zfb+chewei.zfb).toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>支付宝总收入</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/property/propertyWater">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-invoice-icon"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
<!--                                  <div>{{ meuite.xx.toFixed(2) }}</div> &lt;!&ndash; 右边上方的内容 &ndash;&gt;-->
                                  <div>{{ (yueka.xx+linshi.xx+shangjia.xx+chewei.xx).toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>线下总收入</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/property/propertyWater">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-etc"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.etc.toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>ETC收入</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                      </el-menu>
                    </div>
                    <div class="el-menu-box1">
                      <el-menu
                        class="el-cli-router"
                        mode="horizontal"
                        router="router"
                      >
                        <el-menu-item-group>
                          <el-menu-item index="/property/propertyWater">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-a-121dianpugaishu-ICON-jinrizongshouru"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
<!--                                  <div>{{ meuite.sum.toFixed(2) }}</div> &lt;!&ndash; 右边上方的内容 &ndash;&gt;-->
                                  <div>{{ (meuite.etc+yueka.xx+linshi.xx+shangjia.xx+chewei.xx+yueka.zfb+linshi.zfb+shangjia.zfb+chewei.zfb+yueka.wx+linshi.wx+shangjia.wx+chewei.wx).toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>总收入</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/property/vouchers">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-mian"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.mian.toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>优免金额</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-a-8shoukuanfenzhang"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.fen.toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>分账金额</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-loaning"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.huo.toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>提现金额</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                      </el-menu>
                    </div>
                    <div class="el-menu-box1">
                      <el-menu
                        class="el-cli-router"
                        mode="horizontal"
                        router="router"
                      >
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-bhjweizhifu"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.nopay.toFixed(2) }}</div> <!-- 右边上方的内容 -->
                                  <div>未支付金额</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/carss/cars">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-approach"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.inp }}</div> <!-- 右边上方的内容 -->
                                  <div>车辆进场</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item index="/carss/cars">
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-exit"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.outp }}</div> <!-- 右边上方的内容 -->
                                  <div>车辆出场</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-yichangguanli"></i>
                                <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.exop }}</div> <!-- 右边上方的内容 -->
                                  <div>异常开闸</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                      </el-menu>
                    </div>
                    <div class="el-menu-box1">
                      <el-menu
                        class="el-cli-router"
                        mode="horizontal"
                      >
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-mian"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.mgo }}</div> <!-- 右边上方的内容 -->
                                  <div>免通行车辆</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-weizhifu"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.nopc }}</div> <!-- 右边上方的内容 -->
                                  <div>未支付车辆</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-dingdan"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.zsum }}</div> <!-- 右边上方的内容 -->
                                  <div>总订单</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                          <el-menu-item>
                            <el-row type="flex" align="middle">
                              <el-col :span="13">
                                <i class="iconfont icon-wj-rms"></i> <!-- 左边的图标 -->
                              </el-col>
                              <el-col :span="11">
                                <div style="line-height: 20px">
                                  <div>{{ meuite.mord }}</div> <!-- 右边上方的内容 -->
                                  <div>优免订单</div> <!-- 右边下方的内容 -->
                                </div>
                              </el-col>
                            </el-row>
                          </el-menu-item>
                        </el-menu-item-group>
                      </el-menu>
                    </div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="footer_box">
                <div id="footer_left" ref="chartContainer"></div>
                <div id="footer_right" ref="chartContainer2"></div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import {listHome, listProperty} from "@/api/ruoyi-home/home";
import {listPropertyWater, getttApiList, getptApiList} from "@/api/modules/sys-property-water/propertyWater"
import {listCars} from "@/api/pxy-cars/cars"
import {listCt} from "@/api/info/ct"
import {listType} from "@/api/info/type"

export default {
  name: "Index",
  data() {
    return {
      meuite: {
        wx: 0.00,
        zfb: 0.00,
        xx: 0.00,
        etc: 0.00,
        sum: 0.00,
        mian: 0.00,
        fen: 0.00,
        huo: 0.00,
        nopay: 0.00,
        inp: 0,
        outp: 0,
        exop: 0.00,
        mgo: 0.00,
        nopc: 0.00,
        zsum: 0,
        mord: 0.00,
      },
      yueka: {
        wx: 0.00,
        zfb: 0.00,
        xx: 0.00,
        num: 0
      },
      chewei: {
        wx: 0.00,
        zfb: 0.00,
        xx: 0.00,
        num: 0
      },
      linshi: {
        wx: 0.00,
        zfb: 0.00,
        xx: 0.00,
        num: 0
      },
      shangjia: {
        wx: 0.00,
        zfb: 0.00,
        xx: 0.00,
        num: 0
      },
      /*
      * 上 数据金额 从 不同情况的订单金额 拿
      *
      * */

      chartData: [], // 存储收入情况数据
      chartData2: [], // 存储车辆情况数据
      // 存储不同情况的订单金额
      chartData3: [],
      chartData4: [],
      chartData5: [],
      properList: [],
      carList: [],
      queryParams: {
        pageSize: 10000,
        ohid: null,
        time: [],
      },
      queryParams2: {
        hpid: null,
        padStatus: null,
      },
      pdate: 'day',
      chid: null,
      chome: {
        pmid: null,
      },

    }
  },
  methods: {
    // 月 日 上 开
    async fetchData() {
      const today = new Date(this.queryParams.time[0])
      const today1 = new Date(this.queryParams.time[1])
      const day = today.getDate()
      const day1 = today1.getDate()
      const month = today.getMonth() + 1
      let data = [];
      let data1 = [];
      let data2 = [];
      // this.queryParams.time[0] = `${month}月1日`;
      // this.queryParams.time[1] = `${month}月${day - 1}日`;
      this.queryParams.params = {};
      this.queryParams.params["beginCreateTime"] = this.queryParams.time[0];
      this.queryParams.params["endCreateTime"] = this.queryParams.time[1];
      const res = await listPropertyWater(this.queryParams)
      data = res.rows
      this.queryParams2.padStatus = 0
      const res1 = await listCars(this.queryParams2)
      data1 = res1.rows
      this.queryParams2.padStatus = 1
      const res2 = await listCars(this.queryParams2)
      data2 = res2.rows
      let result = [];
      let chidObj = {
        chid: null,
      }
      if (!this.queryParams2.chid) {
        const res = await listType();
        result = res.rows;
      } else {
        chidObj.chid = this.queryParams2.chid;
        const res2 = await listCt(chidObj);
        result = res2.rows.map(item => item.carsType);
      }

      const [resp, response] = await Promise.all([getttApiList(), this.getBackendData()]);

      this.chartData2 = [
        result.map(item => ({
          name: item.typeName, value: 0
        }))
      ]

      this.chartData = [
        resp.rows.map(item => ({name: item.typeName, value: 0}))
      ];
      this.chartData3 = this.chartData;
      this.chartData4 = this.chartData2;
      this.chartData5 = this.chartData2;
      if (this.pdate === 'day') {
        // 选择日的情况下
        // 拿到数据取出今天的数据
        let dayMsg = [];
        let dayMsg2 = [];
        let dayMsg3 = [];
        data.find(item => {
          const itemDate = new Date(item.createTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() >= day && itemDate.getDate() <= day1) {
            dayMsg.push(item);
            this.meuite.zsum++
          }
          return false;
        })
        if (dayMsg.length !== 0) {
          for (let i = 0; i < dayMsg.length; i++) {
            for (let j = 0; j < this.chartData3[0].length; j++) {
              if (this.chartData3[0][j].name === dayMsg[i].payOrder.tradingType.typeName) {
                this.chartData3[0][j].value += dayMsg[i].orderPrice;
                if(this.chartData3[0][j].name === '月卡套餐') {
                  this.yueka.num++
                  if(dayMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.yueka.wx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.yueka.zfb += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.yueka.xx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += dayMsg[i].orderPrice
                  }
                }
                if(this.chartData3[0][j].name === '车位套餐') {
                  this.chewei.num++
                  if(dayMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.chewei.wx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.chewei.zfb += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.chewei.xx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += dayMsg[i].orderPrice
                  }
                }
                if(this.chartData3[0][j].name === '临停缴费') {
                  this.linshi.num++
                  if(dayMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.linshi.wx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.linshi.zfb += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.linshi.xx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += dayMsg[i].orderPrice
                  }
                }
                if(this.chartData3[0][j].name === '商家充值') {
                  this.shangjia.num++
                  if(dayMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.shangjia.wx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.shangjia.zfb += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.shangjia.xx += dayMsg[i].orderPrice
                  }
                  if(dayMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += dayMsg[i].orderPrice
                  }
                }
              }
            }
          }
        }
        // for (const msg of dayMsg) {
        //   const tradingType = msg.payOrder.tradingType.typeName;
        //   const orderPrice = msg.orderPrice;
        //   const chartData = this.chartData3[0].find(data => data.name === tradingType);
        //   if (chartData) {
        //     chartData.value += orderPrice;
        //   }
        // }
        data1.find(item => {
          const itemDate = new Date(item.intoTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() >= day && itemDate.getDate() <= day1) {
            dayMsg2.push(item);
            this.meuite.inp++
          }
          return false;
        })
        if (dayMsg2.length !== 0) {
          for (let i = 0; i < dayMsg2.length; i++) {
            for (let j = 0; j < this.chartData4[0].length; j++) {
              if (this.chartData4[0][j].name === dayMsg2[i].carsType.typeName) {
                this.chartData4[0][j].value++;
              }
            }
          }
        }
        // if (dayMsg2.length !== 0) {
        //   dayMsg2.forEach(dayMsg => {
        //     let numInto = 0;
        //     let carType = this.chartData4[0].find(item => item.name === dayMsg.carsType.typeName);
        //     if (carType) {
        //       numInto++;
        //       carType.value = numInto;
        //     }
        //   });
        // }
        data2.find(item => {
          const itemDate = new Date(item.outsideTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() >= day && itemDate.getDate() <= day1) {
            dayMsg3.push(item);
            this.meuite.outp++
          }
          return false;
        })
        if (dayMsg3.length !== 0) {
          for (let i = 0; i < dayMsg3.length; i++) {
            for (let j = 0; j < this.chartData5[0].length; j++) {
              if (this.chartData5[0][j].name === dayMsg3[i].carsType.typeName) {
                this.chartData5[0][j].value++;
              }
            }
          }
        }
        // if (dayMsg3.length !== 0) {
        //   for (let i = 0; i < dayMsg3.length; i++) {
        //     const typeName = dayMsg3[i].carsType.typeName;
        //     const chartDataItem = this.chartData5[0].find(item => item.name === typeName);
        //     if (chartDataItem) {
        //       chartDataItem.value++;
        //     }
        //   }
        // }
      } else {
        // 月的情况
        let monthMsg = [];
        let monthMsg2 = [];
        let monthMsg3 = [];
        data.find(item => {
          const itemDate = new Date(item.createTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month) {
            monthMsg.push(item);
            this.meuite.zsum++
          }
          return false;
        })
        // if (monthMsg.length !== 0) {
        //   for (let i = 0; i < monthMsg.length; i++) {
        //     let price = 0;
        //     for (let j = 0; j < this.chartData3[0].length; j++) {
        //       if (this.chartData3[0][j].name === monthMsg[i].payOrder.tradingType.typeName) {
        //         price += monthMsg[i].orderPrice
        //         console.log(price)
        //         this.chartData3[0][j].value = price;
        //       }
        //     }
        //   }
        // }
        if (monthMsg.length !== 0) {
          for (let i = 0; i < monthMsg.length; i++) {
            let price = 0;
            // console.log(monthMsg[i])
            let tradingType = monthMsg[i].payOrder.tradingType.typeName;
            this.chartData3[0].find(item => {
              if(item.name === tradingType) {
                item.value += monthMsg[i].orderPrice;
                if(item.name === '月卡套餐') {
                  this.yueka.num++
                  if(monthMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.yueka.wx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.yueka.zfb += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.yueka.xx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += monthMsg[i].orderPrice
                  }
                }
                if(item.name === '车位套餐') {
                  this.chewei.num++
                  if(monthMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.chewei.wx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.chewei.zfb += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.chewei.xx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += monthMsg[i].orderPrice
                  }
                }
                if(item.name === '临停缴费') {
                  this.linshi.num++
                  if(monthMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.linshi.wx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.linshi.zfb += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.linshi.xx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += monthMsg[i].orderPrice
                  }
                }
                if(item.name === '商家充值') {
                  this.shangjia.num++
                  if(monthMsg[i].payOrder.payType.typeName === '微信支付') {
                    this.shangjia.wx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '支付宝支付') {
                    this.shangjia.zfb += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === '线下支付') {
                    this.shangjia.xx += monthMsg[i].orderPrice
                  }
                  if(monthMsg[i].payOrder.payType.typeName === 'ETC支付') {
                    this.meuite.etc += monthMsg[i].orderPrice
                  }
                }
              }
            });
          }
        }

        data1.find(item => {
          const itemDate = new Date(item.intoTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month && itemDate.getDate() >= day && itemDate.getDate() <= day1) {
            monthMsg2.push(item);
            this.meuite.inp++
          }
          return false;
        })
        if (monthMsg2.length !== 0) {
          for (let i = 0; i < monthMsg2.length; i++) {
            for (let j = 0; j < this.chartData4[0].length; j++) {
              if (this.chartData4[0][j].name === monthMsg2[i].carsType.typeName) {
                this.chartData4[0][j].value++;
              }
            }
          }
        }
        // if (monthMsg2.length !== 0) {
        //   for (let i = 0; i < monthMsg2.length; i++) {
        //     let numInto = 0;
        //     const typeName = monthMsg2[i].carsType.typeName;
        //     const chartDataItem = this.chartData4[0].find(item => item.name === typeName);
        //     if (chartDataItem) {
        //       numInto++;
        //       this.chartData4[0][i].value = numInto;
        //     }
        //   }
        // }
        data2.find(item => {
          const itemDate = new Date(item.outsideTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month && itemDate.getDate() >= day && itemDate.getDate() <= day1) {
            monthMsg3.push(item);
            this.meuite.outp++
          }
          return false;
        })
        if (monthMsg3.length !== 0) {
          for (let i = 0; i < monthMsg3.length; i++) {
            for (let j = 0; j < this.chartData5[0].length; j++) {
              if (this.chartData5[0][j].name === monthMsg3[i].carsType.typeName) {
                this.chartData5[0][j].value++;
              }
            }
          }
        }

        // if (monthMsg3.length !== 0) {
        //   const chartData = this.chartData5[0];
        //   for (let i = 0; i < monthMsg3.length; i++) {
        //     let numOut = 0;
        //     const typeName = monthMsg3[i].carsType.typeName;
        //     const matchedData = chartData.find(data => data.name === typeName);
        //     if (matchedData) {
        //       numOut++;
        //       this.chartData5[0][i].value = numOut;
        //     }
        //   }
        // }
      }
      await this.drawChart();
    },
    sumTes(price) {
      return price + price
    },
    async drawChart() {
      const option = {
        title: {
          text: '收入情况(元)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tar = params[0];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
          }
        },
        xAxis: {
          type: 'category',
          data: this.chartData[0].map(item => item.name),
          axisLabel: {
            rotate: -5, // 旋转标签，使其以 -45 度的角度显示
            interval: 0, // 强制显示所有标签
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '收入情况(元)',
          data: this.chartData3[0].map(item => item.value),
          type: 'bar'
        }]
      };

      const option2 = {
        title: {
          text: '车辆情况(辆)'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var tar = params[0];
            var tar1 = params[1];
            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value+ '<br/>' +  tar1.seriesName + ' : ' + tar1.value;
          }
        },
        legend: {
          data: ['入场车量', '出场车量'],
        },
        xAxis: {
          type: 'category',
          data: this.chartData2[0].map(item => item.name),
          axisLabel: {
            rotate: -5, // 旋转标签，使其以 -45 度的角度显示
            interval: 0, // 强制显示所有标签
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入场车量',
            data: this.chartData4[0].map(item => item.value),
            type: 'bar'
          },
          {
            name: '出场车量',
            data: this.chartData5[0].map(item => item.value),
            type: 'bar'
          },
        ]
      };


      await Promise.all([
        // 调整图表容器的宽度，确保所有的 xAxis 数据都能够显示
        this.chart3.resize(),
        this.chart4.resize(),
        this.chart3.setOption(option),
        this.chart4.setOption(option2)
      ]);
    },

    async getBackendData() {
      // 假设后端返回的数据格式为：
      return null;
    },
    // 月 日 上 结
    // 月流 下左 开
    async processData() {
      const today = new Date(this.queryParams.time[0])
      const today1 = new Date(this.queryParams.time[1])
      const day = today.getDate()
      const day1 = today1.getDate()
      const month = today.getMonth() + 1
      const daysInMonth = new Date(today.getFullYear(), month, 0).getDate()
      const xAxisData = []
      const seriesData = []
      const seriesData1 = []
      const seriesData2 = []
      const seriesData3 = []
      let data = [];
      let data1 = [];
      let data2 = [];
      // this.queryParams.time[0] = `${month}月1日`;
      // this.queryParams.time[1] = `${month}月${day - 1}日`;
      this.queryParams.params = {};
      this.queryParams.params["beginCreateTime"] = this.queryParams.time[0];
      this.queryParams.params["endCreateTime"] = this.queryParams.time[1];
      const res = await listPropertyWater(this.queryParams)
      data = res.rows
      this.queryParams2.padStatus = 0
      const res1 = await listCars(this.queryParams2)
      data1 = res1.rows
      this.queryParams2.padStatus = 1
      const res2 = await listCars(this.queryParams2)
      data2 = res2.rows
      for (let i = 1; i <= day1; i++) {
        // let price = 0;
        // let price1 = 0;
        // let priceNum = 1;
        // let priceNum1 = 0;
        // let numInto = 1;
        // let numInto1 = 0;
        // let numOut = 1;
        // let numOut1 = 0;
        xAxisData.push(`${month}月${i}日`)
        seriesData.push(0)
        seriesData1.push(0);
        seriesData2.push(0);
        seriesData3.push(0);
        // const currentDate = `${today.getFullYear()}-${month}-${i}`
        const order = data.find(item => {
          const itemDate = new Date(item.createTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() === i) {
            seriesData[i-1] += item.orderPrice;
            seriesData1[i-1]++;
            // price += item.orderPrice;
            // price1 = this.sumTes(price)
            // priceNum++
            // priceNum1 = this.sumTes(priceNum);
          }
          return false;
        })
        // seriesData1[i-1] = priceNum1;
        const order1 = data1.find(item => {
          const itemDate = new Date(item.intoTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() >= day && itemDate.getDate() <= day1 && itemDate.getDate() === i) {
            seriesData2[i-1]++;
            // numInto++
            // numInto1 = this.sumTes(numInto);
          }
          return false;
        })

        const order2 = data2.find(item => {
          const itemDate = new Date(item.outsideTime);
          if (itemDate.getFullYear() === today.getFullYear() &&
            itemDate.getMonth() + 1 === month &&
            itemDate.getDate() >= day && itemDate.getDate() <= day1 && itemDate.getDate() === i) {
            seriesData3[i-1]++;

            // numOut++
            // numOut1 = this.sumTes(numOut)
          }
          return false;
        })

        // seriesData.push(order ? 0 : price1);
        // 修改 +++++++ 未看是否正常   待测试
        // seriesData2.push(order1 ? 0 : numInto1);
        // seriesData3.push(order2 ? 0 : numOut1);
      }
      await this.renderChart(xAxisData, seriesData, seriesData1);
      await this.renderChart2(xAxisData, seriesData2, seriesData3);
    },
    async renderChart(xAxisData, seriesData, seriesData1) {
      await this.chart.setOption(this.getChartOption(xAxisData, seriesData, seriesData1))
    },
    async renderChart2(xAxisData, seriesData, seriesData1) {
      await this.chart2.setOption(this.getChartOption2(xAxisData, seriesData, seriesData1))
    },
    getChartOption(xAxisData, seriesData, seriesData1) {
      return {
        title: {
          text: '月订单收入情况',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['订单数量', '订单总金额'],
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '订单数量',
            type: 'line',
            data: seriesData1,
          },
          {
            name: '订单总金额',
            type: 'line',
            data: seriesData,
          },
        ],
      }
    },
    getChartOption2(xAxisData, seriesData, seriesData1) {
      return {
        title: {
          text: '月车流量变化',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['入场车辆', '出场车辆'],
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '出场车辆',
            type: 'line',
            data: seriesData1,
          },
          {
            name: '入场车辆',
            type: 'line',
            data: seriesData,
          },
        ],
      }
    },
    // 月流 下左 结
    prosList() {
      listProperty().then(res => {
        this.properList = res.rows;
        this.queryParams2.hpid = null;
      })
    },
    carsList() {
      listHome(this.queryParams).then(res => {
        this.carList = res.rows
      })
    },
    restMsgTime() {
      this.queryParams.ohid = null
      this.queryParams2.hpid = null
      // 没用
      // this.initTime();
    },
    querySel() {
      // 首先清空
      this.chart.clear();
      this.chart2.clear();
      this.chart3.clear();
      this.chart4.clear();
      this.meuite= {
        wx: 0.00,
          zfb: 0.00,
          xx: 0.00,
          etc: 0.00,
          sum: 0.00,
          mian: 0.00,
          fen: 0.00,
          huo: 0.00,
          nopay: 0.00,
          inp: 0,
          outp: 0,
          exop: 0.00,
          mgo: 0.00,
          nopc: 0.00,
          zsum: 0,
          mord: 0.00,
      },
      this.yueka= {
        wx: 0.00,
          zfb: 0.00,
          xx: 0.00,
          num: 0
      },
      this.chewei= {
        wx: 0.00,
          zfb: 0.00,
          xx: 0.00,
          num: 0
      },
      this.linshi= {
        wx: 0.00,
          zfb: 0.00,
          xx: 0.00,
          num: 0
      },
      this.shangjia= {
        wx: 0.00,
          zfb: 0.00,
          xx: 0.00,
          num: 0
      },
      // 重新渲染数据
      this.processData();
      this.fetchData();
    },
    initTime() {
      const now = new Date();
      function padZeroes(num) {
        return num >= 10 ? num : '0' + num;
      }
      var year = String(now.getFullYear());
      var month = padZeroes(now.getMonth() + 1);
      var day = padZeroes(now.getDate());
      var hour = padZeroes(now.getHours());
      var minute = padZeroes(now.getMinutes());
      var second = padZeroes(now.getSeconds());
      this.currentDateTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      this.oldDateTime = `${year}-${month}-${day} 00:00:00`;
      this.queryParams.time[0] = this.oldDateTime;
      this.queryParams.time[1] = this.currentDateTime;
    },
    handleChangeDateInEvent() {
    },

  },
  computed: {},
  mounted() {
    // 月流 下左 开
    this.chart = echarts.init(this.$refs.chartContainer)
    this.chart2 = echarts.init(this.$refs.chartContainer2)
    this.processData();
    // 月流 下左 结
    // 日 月 上 开
    this.fetchData() // 获取数据
    this.chart3 = echarts.init(this.$refs.chartContainer3)
    this.chart4 = echarts.init(this.$refs.chartContainer4)
    // 日 月 上 结
  },
  created() {
    this.initTime();
    this.prosList();
    this.carsList();
  }
}
</script>
<style scoped lang="scss">
//* {
// 要指定标签 * 影响某些组件的布局外观 如 el-select
//  padding: 0;
//  margin: 0;
//}
.footer_box {
  width: 100%;
  margin-top: 20px;
  height: 580px;
  display: flex;
  justify-content: space-between;

  #footer_left {
    width: 49%;
    height: 100%;
  }

  #footer_right {
    width: 49%;
    height: 100%;
  }
}

.middle_box {
  width: 100%;
  margin-top: 20px;
  height: 360px;
  display: flex;
  justify-content: space-between;

  .box-content2 {
    width: 49%;
    //background-color: #1ab394;
    //width: 23%;
    display: flex;
    justify-content: space-between;

    #box-left-son {
      width: 49%;
      height: 100%;
    }

    #box-right-son {
      width: 49%;
      height: 100%;
    }
  }

  .box-left {
  }

  .box-right {
    //border: 1px solid black;
    .box-parent-flex {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;

      .el-menu-box1 {
        width: 100%;
        //border: 1px solid black;
        .el-cli-router {
          //width: 100%;
          display: flex;
          justify-content: space-between;
          border-bottom: none;
          //border: 1px solid black;
          el-menu-item-group el-menu-item {
            display: block;
            //border-bottom: none;
          }
        }
      }
    }
  }
}

.out_box {
  width: 100%;
  height: 150px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .box-content {
    width: 23%;
  }

  .box-blue {
    background-color: #409efe;
    transition: all 0.3s ease;
  }

  .box-blue:hover {
    transform: scale(1.1);
  }

  .box-red {
    background-color: #f16b6b;
    transition: all 0.3s ease;
  }

  .box-red:hover {
    transform: scale(1.1);
  }

  .box-green {
    background-color: #65be3a;
    transition: all 0.3s ease;
  }

  .box-green:hover {
    transform: scale(1.1);
  }

  .box-gray {
    background-color: #909399;
    transition: all 0.3s ease;
  }

  .box-gray:hover {
    transform: scale(1.1);
  }
}


.col-sty-with {
  display: inline-block;
  margin-left: 20px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #ffffff;
}

.bg-purple {
  background: #ffffff;

}

.bg-purple-light {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  width: 98%;
  margin: 6px auto;
  padding: 0 20px;
  line-height: 40px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.box_back_col {
  height: 100%;
  background-color: #eeeeee;
}
</style>
